<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <!--全局css-->
    <link href="../../../css/g.css" rel="stylesheet">
    <!--每个文件对应一个css-->
    <link href="contact.css" rel="stylesheet">
    <script>
        //每个页面必须添加 ，css单位使用rem
        document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px';
    </script>
</head>
<body id="contacts">
<header class="mui-bar mui-bar-nav">
    <a class="mui-icon mui-icon-plusempty mui-pull-right"></a>
    <a class="mui-icon mui-icon-search mui-pull-right"></a>
    <button class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
        联系人
    </button>
</header>
<div class="mui-content">
    <div class="mui-scroll-wrapper a-top44 a-bottom44">
        <div class="mui-scroll">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media">
                    <span class="mui-media-object mui-pull-left bgcColor">
                        <img src="../../../img/contact/rencai.png">
                    </span>
                    <div class="mui-media-body">
                        <p class="mui-ellipsis">人才库</p>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media">
                    <span class="mui-media-object mui-pull-left bgcColor red">
                        <img src="../../../img/contact/qunliao.png">
                    </span>
                    <div class="mui-media-body">
                        <p class="mui-ellipsis">群聊</p>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media">
                    <span class="mui-media-object mui-pull-left bgcColor black">
                        <img src="../../../img/contact/black.png">
                    </span>
                    <div class="mui-media-body">
                        <p class="mui-ellipsis">黑名单</p>
                    </div>
                </li>
            </ul>
            <div class="contactsBox" id="sort">
                <div id="letter"></div>
                <div class="sort_box" id="view">
                    <!--<script id="template" type="text/html">
                        {{# for(var i = 0,len = d.length;i < len ;i++){ }}
                        {{# for(var j=0;d[i]._child&&j < d[i]._child.length ;j++ ) { }}
                        <div class="sort_list touchItem" data-id="{{d[i]._child[j].pk_id}}">
                            <a href="javascript:void(0)">
                                <div class="num_logo"
                                     style="background: url('{{d.path+d[i]._child[j].head_img}}') no-repeat center center;background-size:cover;-webkit-background-size:cover;"></div>
                                <div class="num_name">{{d[i]._child[j].name}}<span class="tag{{(j+1)%2}}">{{d[i]._child[j].rolename}}</span>
                                </div>
                            </a>
                        </div>
                        {{# } }}
                        {{# } }}
                    </script>-->
                    <div class="sort_list touchItem" data-id="contactDetail" data-url="../contactDetail/contactDetail.html">
                        <a href="javascript:void(0)">
                            <div class="num_logo"
                                 style="background: url('../../../img/contact/touxiang.png') no-repeat center center;background-size:cover;-webkit-background-size:cover;"></div>
                            <div class="num_name">陈亮<img class="sex" src="../../../img/public/man.png"/>
                            </div>
                        </a>
                    </div>
                    <div class="sort_list touchItem">
                        <a href="javascript:void(0)">
                            <div class="num_logo"
                                 style="background: url('../../../img/contact/touxiang.png') no-repeat center center;background-size:cover;-webkit-background-size:cover;"></div>
                            <div class="num_name">王小二<img class="sex" src="../../../img/public/man.png"/>
                            </div>
                        </a>
                    </div>
                    <div class="sort_list touchItem">
                        <a href="javascript:void(0)">
                            <div class="num_logo"
                                 style="background: url('../../../img/contact/touxiang.png') no-repeat center center;background-size:cover;-webkit-background-size:cover;"></div>
                            <div class="num_name">羊羊羊<img class="sex" src="../../../img/public/man.png"/>
                            </div>
                        </a>
                    </div>
                    <div class="sort_list touchItem">
                        <a href="javascript:void(0)">
                            <div class="num_logo"
                                 style="background: url('../../../img/contact/touxiang.png') no-repeat center center;background-size:cover;-webkit-background-size:cover;"></div>
                            <div class="num_name">蔡明<img class="sex" src="../../../img/public/man.png"/>
                            </div>
                        </a>
                    </div>
                    <div class="sort_list touchItem">
                        <a href="javascript:void(0)">
                            <div class="num_logo"
                                 style="background: url('../../../img/contact/touxiang.png') no-repeat center center;background-size:cover;-webkit-background-size:cover;"></div>
                            <div class="num_name">蔡明<img class="sex" src="../../../img/public/man.png"/>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="initials">
                    <ul></ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--有用到再引用-->
<!--接口-->
<script src="../../../js/mui.min.js"></script>
<script src="jquery-1.10.1.min.js"></script>
<script src="jquery.charfirst.pinyin.js"></script>
<script src="../../../js/base.js"></script>
<!--模板-->
<script src="../../../js/laytpl.js"></script>
<!--常用方法 dom操作用原生或mui-->
<script src="../../../js/mq.js"></script>
<script src="sort.js"></script>
<script src="contact.js"></script>
<script>
    mui.init({
        preloadPages: [{
            url: "../contactDetail/contactDetail.html",
            id: "contactDetail"
        }]
    });
    $$.initScroll();
//    渲染联系人
    initContacts();
    mui.plusReady(function () {
//        页面跳转
        app.jump();
    });
</script>
</body>
</html>